<template>
    <transition name="custom-classes-transition" enter-active-class="animated slideInUp" leave-active-class="animated slideOutDown">
        <div id="modal" @click="closeModal">
            <div class="modal-content" @click.stop>
                <div class="close">
                    <button @click="closeModal">&times;</button>
                </div>
                <div class="modal-header">
                    <slot name="title">
                        <span>建仓</span>
                    </slot>
                </div>
                <div class="modal-body">
                    <slot name="body">
                        <ul class="mai">
                            <li class="mairu" @click="active('mairu')">
                                <span>买入</span>
                            </li>
                            <li class="maichu" @click="active('maichu')">
                                <span>卖出</span>
                            </li>
                        </ul>
                        <ul class="zuoyou">
                            <li @click="nextTicker('left')">
                                <i class="iconfont icon-zuo"></i>
                            </li>
                            <li>
                                <div>{{dataObj.name}}</div>
                                <div class="shi">实时：
                                    <span>{{dataObj.value}}</span>
                                </div>
                            </li>
                            <li @click="nextTicker('right')">
                                <i class="iconfont icon-you"></i>
                            </li>
                        </ul>
                        <hr>
                        <div class="shuju">
                          <span>保证金(元/手)</span>
                          <ul @click="activeLan($event,'保证金');">
                            <li class="active-lan">100</li>
                            <li>200</li>
                            <li>300</li>
                            <li>400</li>
                          </ul>
                          <span>止盈止损档位</span>
                          <ul @click="activeLan($event,'盈损');">
                            <li class="active-lan">300</li>
                            <li>400</li>
                            <li>500</li>
                          </ul>
                          <span>手数</span>
                          <ul class="shoushu" @click="activeLan($event,'手数');">
                            <li class="active-lan">1</li>
                            <li>2</li>
                            <li>3</li>
                            <li>4</li>
                            <li>5</li>
                            <li>6</li>
                            <li>7</li>
                            <li>8</li>
                            <li>9</li>
                            <li>10</li>
                          </ul>
                        </div>
                      <hr>
                    </slot>
                </div>
                <div class="modal-fooder">
                    <slot name="fooder">
                      <span>总保证金：<span>{{bzj保证金 * ss手数}}</span></span>
                      <button class="active">确认</button>
                    </slot>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import index from "vue";
export default {
  data() {
    return {
      ticker: [
        {
          name: "比特币BTC",
          item: "btc",
          value: 0
        },
        {
          name: "莱特币LTC",
          item: "ltc",
          value: 0
        },
        {
          name: "以太坊ETH",
          item: "eth",
          value: 0
        }
      ],
      dataObj: {
        name: "比特币BTC",
        value: 0
      },
      index: 0,
      bzj保证金: 100,
      ys盈损: 300,
      ss手数: 1
    };
  },
  computed: {
    ...mapGetters(["getBtc", "getLtc", "getEth"])
  },
  props: ["value"],
  mounted() {
    this.active(this.value.mai);
    this.getAllTicker(this.value.ticker);
  },
  methods: {
    ...mapActions(["getBtcTicker", "getLtcTicker", "getEthTicker"]),
    closeModal() {
      this.$emit("close");
    },
    active(mai) {
      // 找到父节点下的所有 li 标签
      let oLi = document
        .getElementsByClassName("modal-body")[0]
        .getElementsByTagName("li");

      // 遍历并去除所有li标签的 active 样式
      for (let index = 0; index < oLi.length; index++) {
        const element = oLi[index];
        element.classList.remove("active");
      }
      // 添加
      document
        .getElementsByClassName("modal-body")[0]
        .getElementsByClassName(mai)[0]
        .classList.add("active");
    },
    activeLan(event, key) {
      if (event.target.tagName == "LI") {
        // 找到父节点下的所有 li 标签
        let oLi = event.currentTarget.getElementsByTagName("li");
        // 遍历并去除所有li标签的 active 样式
        for (let index = 0; index < oLi.length; index++) {
          const element = oLi[index];
          element.classList.remove("active-lan");
        }
        switch (key) {
          case "保证金":
            this.bzj保证金 = event.target.innerHTML;
            break;
          case "盈损":
            this.ys盈损 = event.target.innerHTML;
            break;
          case "手数":
            this.ss手数 = event.target.innerHTML;
            break;
          default:
            return console.log("不明所以");
            break;
        }
        // event.currentTarget 当前函数作用的节点
        event.target.classList.add("active-lan");
      }
    },
    // 根据需要获取数据
    async getAllTicker(ticker) {
      switch (ticker) {
        case "btc":
          await this.getBtcTicker();
          this.ticker[0].value = this.getBtc.last;
          this.dataObj = this.ticker[0];
          break;
        case "ltc":
          await this.getLtcTicker();
          this.ticker[1].value = this.getLtc.last;
          this.dataObj = this.ticker[1];
          break;
        case "eth":
          await this.getEthTicker();
          this.ticker[2].value = this.getEth.last;
          this.dataObj = this.ticker[2];
          break;
        default:
          console.log("不明所以");
          break;
      }
    },
    // 左右切换
    nextTicker(value) {
      if (value == "left") {
        --this.index;
        this.next();
      } else if (value == "right") {
        ++this.index;
        this.next();
      }
    },
    /**@method
     * 限制索引的范围
     */
    next() {
      if (this.index < 0) {
        this.index = 2;
      } else if (this.index > 2) {
        this.index = 0;
      }
      this.getAllTicker(this.ticker[this.index].item);
    }
  }
};
</script>

<style scoped>
#modal {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #aaaaaa;
}
.modal-content {
  width: 80vw;
  /* height: 70vh; */
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 0.8rem;
  box-shadow: 2px 2px 20px 1px;
}
.modal-content div {
  width: 100%;
}
.modal-content .close {
  display: flex;
  justify-content: flex-end;
}
.close > button {
  display: block;
  font-size: 1.2rem;
  line-height: 1.2rem;
  color: #cecfd1;
  margin-right: 0.5rem;
  margin-top: 0.5rem;
  width: 1.2rem;
  border: 1px solid #cecfd1;
  background-color: #fff;
}

.modal-header {
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-body .mai {
  list-style: none;
  display: flex;
}
.modal-body .mai > li {
  width: 50%;
  display: flex;
  justify-content: center;
  font-size: 0.8rem;
  line-height: 2rem;
}
.active {
  background-color: #fb7d3f;
  color: #fff;
}
.active-lan {
  background-color: #42a5f0;
  color: #fff;
  border: none !important;
}
.modal-body .zuoyou {
  display: flex;
  justify-content: space-around;
  list-style: none;
  color: #3d84f8;
  margin-top: 0.625rem;
}
.modal-body .zuoyou i {
  line-height: 3rem;
  font-size: 2rem;
}
.modal-body .shi {
  font-size: 0.5rem;
  color: #aaaaaa;
}
.modal-body .shi span, .modal-fooder>span>span{
  color: #ff0000;
}
.modal-body hr {
  width: 80%;
  margin: 0 auto;
  border-left: none;
  border-top: 1px #aaaaaa;
  margin-top: 1rem;
}
.modal-body .shuju {
  font-size: 0.8rem;
  width: 90%;
  margin: 0 auto;
  /* margin-bottom: 1rem;s */
}
.modal-body .shuju span {
  display: block;
  text-align: center;
  margin-top: .5rem;
}
.modal-body .shuju ul {
  list-style: none;
  display: flex;
  justify-content: space-around;
}
.modal-body .shuju ul > li {
  border: 1px solid #aaaaaa;
  width: 15%;
  text-align: center;
}
.modal-body .shuju .shoushu {
  flex-wrap: wrap;
}
.modal-body .shuju .shoushu li {
  width: 17%;
  margin-top: 0.5rem;
}
.modal-fooder{
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 20%;
  justify-content: center;
}
.modal-fooder button{
  border: none;
  line-height: 2rem;
  font-size: 1.2rem;
  width: 30%;
  margin-top: .5rem;
  margin-bottom: 1rem;
}
</style>